<template>
  <div id="ToolCollegeLibraryList">
    <el-table
      :data="collegeTableData"
      style="width: 100%"
      stripe
      :header-cell-style="{
        color: '#86909c',
        fontSize: '16px',
      }"
    >
      <el-table-column prop="ranking" label="排名" align="center" />
      <el-table-column prop="cnName" label="院校" width="300">
        <template #default="scope">
          <div>
            <div
              class="curr"
              style="font-weight: bold"
              @click="handleCollegeDet(scope.row)"
            >
              {{ scope.row.cnName }}
            </div>
            <div class="f12" style="color: #bcc3cc">
              <span v-for="item in scope.row.features" :key="item"
                >{{ item }}&nbsp;</span
              ><span
                >{{ scope.row.categories[0] }}{{ scope.row.provinceName }}（{{
                  scope.row.cityName
                }}）{{ scope.row.eduLevelName
                }}{{ scope.row.natureTypeName }}</span
              >
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="硕士点" align="center">
        <template #default="scope">
          <span>{{ scope.row.pointsOfShuo[0]?.number || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="博士点" align="center">
        <template #default="scope">
          <span>{{ scope.row.pointsOfBo[0]?.number || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="cnName" label="A类学科" align="center">
        <template #default="scope">
          <span>
            {{ scope.row.aClassNum || '-' }}
          </span>
        </template>
      </el-table-column>
      <el-table-column sortable label="双一流学科" width="170" align="center">
        <template #default="scope">
          <span>{{ scope.row.sylNum || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="cnName"
        sortable
        label="国家级特色专业"
        width="170"
        align="center"
      >
        <template #default="scope">
          <span>{{ scope.row.countriesNum || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="cnName"
        sortable
        label="省级特色专业"
        width="170"
        align="center"
      >
        <template #default="scope">
          <span>{{ scope.row.provincesNum || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" v-if="studentId">
        <template #default="scope">
          <el-button
            text
            @click="handleMyLike(scope.row)"
            :class="scope.row.isSelected ? '' : 'isActive'"
          >
            {{ scope.row.isSelected ? '取关' : '关注' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { getLikeSave } from '@/api/appv2/appv2';
import { ElMessage } from 'element-plus';
// import bus from '@/utils/bus';
import { ref } from 'vue';

const emits = defineEmits(['handleCollegeList', 'handleCollegeDetails']);
const { collegeTableData } = defineProps({
  collegeTableData: {
    type: Array,
    default: () => [],
  },
});

const studentId = ref(localStorage.getItem('student_id'));
const handleCollegeDet = (data) => {
  let mydata = {
    isShow: true,
    type: '3',
    data,
  };
  emits('handleCollegeDetails', mydata);
};
const liskeSaveData = ref({
  type: 'school',
  targetid: '',
  operate: '',
});
const fetchLikeSave = () => {
  getLikeSave(liskeSaveData.value).then((res) => {
    if (res.code == 20000) {
      ElMessage({
        message: res.msg,
        type: 'success',
      });
      emits('handleCollegeList');
    }
  });
};
const handleMyLike = (data) => {
  liskeSaveData.value.targetid = data.code;
  liskeSaveData.value.studentId = localStorage.getItem('student_id');
  data.isSelected
    ? (liskeSaveData.value.operate = 'del')
    : (liskeSaveData.value.operate = 'save');
  fetchLikeSave();
};
</script>

<style lang="scss" scoped>
#ToolCollegeLibraryList {
  margin-top: 20px;
}
.isActive {
  color: #409eff;
}
</style>
